import Vue from '../vue/index'
// import Vue from 'vue/dist/vue'

new Vue({
  data() {
    return {
      count: 1,
      twoCount: 0,
      isIf: true,
      isShow: true
    }
  },
  // computed: {
  //   tenCount() {
  //     return this.count * 10
  //   }
  // },
  // watch: {
  //   count: {
  //     immediate: true,
  //     handler() {
  //       this.twoCount = this.count * 2
  //     }
  //   }
  // },
  // components: {
  //   person: {
  //     props: ['twoCount'],
  //     render(h) {
  //       return h('div', null, this.twoCount)
  //     }
  //   }
  // },
  // mixins: [
  //   {
  //     data() {
  //       return {
  //         time: new Date()
  //       }
  //     },
  //     created() {
  //       console.log('created -> trigger', this.time)
  //     },
  //     mounted() {
  //       console.log('mounted -> trigger', this.time)
  //     }
  //   }
  // ],
  template: `
      <div>
        <p>
            <div style="color:red;">count:{{count}}，tenCount:{{tenCount}}</div>
            <person :twoCount="twoCount"></person>
            <button @click="add">点击加count</button>
        </p>
        <p>
            <div v-if="isIf">显示if</div>
            <button @click="ifToggle">点击if切换</button>
        </p>
        <p>
            <div v-show="isShow">显示show</div>
            <button @click="showToggle">点击show切换</button>
        </p>
      </div>
      `
  // methods: {
  //   add() {
  //     this.count++
  //   },
  //   ifToggle() {
  //     this.isIf = !this.isIf
  //   },
  //   showToggle() {
  //     this.isShow = !this.isShow
  //   }
  // }
}).$mount('#app')
